<template>
	<char-base :options="chartOptions" class="chartline"></char-base>
</template>

<script>
	import charBase from '../chart/chart-base'
	import echarts from 'echarts'
	export default {
		name: 'wioc-chart-line-area',
		components: {
			charBase
		},
		props: ['componentParams',"showdemo"],
		data() {
			return {
				chartOrigin: {
					columns: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
					list: [{
						"name": "今日预约量",
						"data": [120, 132, 101, 134, 190, 230, 210, 220]
					}, {
						"name": "今日接待人数",
						"data": [220, 182, 191, 234, 290, 330, 310, 120]
					}, {
						"name": "今日办理量",
						"data": [320, 332, 301, 190, 330, 410, 290, 330],
					}]
				},
				chartOptions:{}
			}
		},
		created(){
			// if(this.showdemo){
			// 	this.setChartOptions(this.chartOrigin)
			// }
			this.setChartOptions(this.chartOrigin)
		},
		watch:{
			"dynamicDataResult": {
				handler() {
					this.setChartOptions(this.dynamicDataResult.data)
				},
				deep: true
			},
			"componentParams": {
				handler() {
					this.getDynamicData()
				},
				deep: true
			}
		},
		methods: {
			setChartOptions(renderData) {
				let colorList = ["#187bfd","#e8a637","#52abb7",'#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c']
				let areaStyleList = [{
					color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
						offset: 0,
						color: 'rgba(24,123,253,0.3)'
					}, {
						offset: 1,
						color: 'rgba(24,123,253,0.9)'
					}]),
				}, {
					color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
						offset: 0,
						color: 'rgba(232,166,55,0.3)'
					}, {
						offset: 1,
						color: 'rgba(232,166,55,0.9)'
					}]),
				}, {
					color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
						offset: 0,
						color: 'rgba(82,172,183,0.3)'
					}, {
						offset: 1,
						color: 'rgba(82,172,183,0.9)'
					}]),
				}, {
					color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
						offset: 0,
						color: 'rgba(175,163,245,0.3)'
					}, {
						offset: 1,
						color: 'rgba(175,163,245,0.9)'
					}]),
				}, {
					color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
						offset: 0,
						color: 'rgba(0,212,136,0.3)'
					}, {
						offset: 1,
						color: 'rgba(0,212,136,0.9)'
					}]),
				}, {
					color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
						offset: 0,
						color: 'rgba(63,238,212,0.3)'
					}, {
						offset: 1,
						color: 'rgba(63,238,212,0.9)'
					}]),
				}, {
					color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
						offset: 0,
						color: 'rgba(59,175,255,0.3)'
					}, {
						offset: 1,
						color: 'rgba(59,175,255,0.9)'
					}]),
				}]
				let legendData = [];
				let tempSeries = [];
				renderData.list.forEach((item, index) => {
					legendData.push(item.name)
					tempSeries.push({
						name: item.name,
						type: 'line',
						itemStyle: {
							normal: {
								color: colorList[index],
								lineStyle: {
									color: colorList[index],
									width: 1
								},
								areaStyle: areaStyleList[index]
							}
						},
						smooth: true,
						data: item.data
					})
				})
				let option = {

					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: '#64a5e5',
							}
						},
						textStyle: {
							fontSize: 24,
						},
					},
					legend: {
						show: true,
						x: 'center',
						y: '10',
						icon: 'stack',
						itemWidth: 10,
						itemHeight: 10,
						textStyle: {
							color: '#fff',
							fontSize: 24,
						},
						data: legendData
					},
					grid: {
						left: '3%',
						right: '3%',
						top:'25%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [

						{
							name: '',
							nameTextStyle: {
								color: "#fff",
								fontSize: 24
							},
							type: 'category',
							axisLine: {
								lineStyle: {
									color: '#64a5e5',
									width: this.lineWidth,
									type: "solid"
								}
							},
							axisLabel: {
								show: true,
								textStyle: {
									color: "#758897",
									fontSize: 24
								}
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: '#346690'
								}
							},
							boundaryGap: false,
							data: renderData.columns
						}
					],
					yAxis: [{
						nameTextStyle: {
							color: "#00c7ff",
							fontSize: 20
						},
						type: 'value',
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#00c7ff',
								width: this.lineWidth,
								type: "solid"
							}
						},
						axisLabel: {
							margin: 10,
							textStyle: {
								color: "#758897",
								fontSize: 24
							}
						},
						splitLine: {
							lineStyle: {
								color: '#346690'
							}
						}
					}],
					series: tempSeries
				};
				this.chartOptions = option
			}
		}
	}
</script>
<style lang="less" scoped="scoped">
	.chartline {
		width: 100%;
		height: 440px;
	}
</style>
